<!doctype html>
<html>
<head>
    <title>Global Storage Example</title>
    <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
    <p>Name: <span id="name-value">(none)</span><br />
    Book: <span id="book-value">(none)</span></p>
    <input type="button" value="Delete Data" id="delete-btn" />
    <input type="button" value="See All" id="see-btn" />
    <p>Refresh the page to see the values. Click &quot;Delete Data&quot; to remove them. Close the browser and re-open this page to see the data is still available.</p>
    <p>This example requires Firefox 2+ to work.<br />
       This example must be run from a server; it won't work when run locally.</p>
    <script type="text/javascript">
        
        EventUtil.addHandler(window, "load", function(){
            
            var dataStore = globalStorage[location.host];
            document.getElementById("name-value").innerHTML = dataStore.getItem("name");
            document.getElementById("book-value").innerHTML = dataStore.getItem("book");
        
            EventUtil.addHandler(document.getElementById("delete-btn"), "click", function(){
                //these don't work in webkit
                //delete dataStore.name;
                //delete dataStore.book;
                dataStore.removeItem("name");
                dataStore.removeItem("book");     
            });
            
            EventUtil.addHandler(document.getElementById("see-btn"), "click", function(){
                for (var i=0, len = dataStore.length; i < len; i++){
                    var key = dataStore.key(i);
                    var value = dataStore.getItem(key);
                    alert(key + "=" + value);
                }            
            });
            
            //set some data
            dataStore.setItem("name",  "Nicholas");
            dataStore.setItem("book", "Professional JavaScript");
        });



    </script>
</body>
</html>
